import React from "react";
import PopStyle from "./Pop.module.css";
import classNames from "classnames/bind";
const bindClassnames = classNames.bind(PopStyle);
class Pop extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: props.visible,
    };
  }
  componentDidUpdate(prevProps) {
    if (prevProps.visible !== this.props.visible) {
      this.setState({
        show: this.props.visible,
      });
    }
  }

  render() {
    return (
      <div
        className={bindClassnames({
          pop: true,
          "pop-show": this.state.show,
        })}
      >
        <div className={PopStyle.content}>
          <div className={PopStyle.title}>{this.props.title}</div>
          <div>{this.props.children}</div>
          <div className="btns">
            <button
              className={PopStyle.btn}
              onClick={(e) => {
                e.preventDefault();
                this.props.onConfirm();
              }}
            >
              提交
            </button>
            <button
              className={PopStyle.btn}
              onClick={(e) => {
                e.preventDefault();
                this.props.onCancel();
              }}
            >
              取消
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Pop.defaultProps = {
  title: "提示",
  popShow: false, //是否显示
};
export default Pop;
